<!-- <template>
  <div class="box">
    <span>最近七天的销售额</span>
    <div id="container"></div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2' // 蚂蚁金服可视化

export default {
  data() {
    return {
      data: [
        { year: '1951 年', sales: 38 },
        { year: '1952 年', sales: 52 },
        { year: '1956 年', sales: 61 },
        { year: '1957 年', sales: 145 },
        { year: '1958 年', sales: 48 },
        { year: '1959 年', sales: 38 },
        { year: '1960 年', sales: 38 },
        { year: '1962 年', sales: 38 },
      ]
    }
  },
  methods: {
    ke() {
      const chart = new Chart({
        container: 'container',
        width: 1000,
        height: 300,
      });
      chart.data(this.data);
      chart.scale('sales', {
        nice: true,
      });

      chart.tooltip({
        showMarkers: false
      });
      chart.interaction('active-region');

      chart.interval().position('year*sales');

      chart.render();
    }
  },
  mounted(){
    this.ke()
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  padding: 0 9.6% 0;
  width: 100%;
  z-index: -1;
  background-color: #f6f8f9;
}

.box span {
  padding-top: 10px;
  margin-bottom: 60px;
  font-weight: 700;
  display: block;
  font-size: 18px;
}
</style> -->





<template>
  <div class="ordering" v-loading.fullscreen.lock="loading">
    <div class="heading">最近七天销售额</div>
    <div class="house-view">
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';// 蚂蚁金服可视化
// import { Chart } from '@antv/g2' // 蚂蚁金服可视化
export default {
  data() {
    return {
      loading: true,
    }
  },
  methods: {
    async seven_days() {
      try {
        let res = await new this.request(this.URL.m().salesvolume).GET()
        console.log(res.data,'res')
        this.house(res.data.data)
        this.loading = false
      } catch (e) {
        this.Message_Box.MessageError("服务器发生错误,请重试");
      }
    },
    house(data) {
      // [{'time':'2021-09-18','sales_volume':200},{'time':'2021-09-18','sales_volume':200}]
      const columnPlot = new Column('container', {
        data,
        xField: 'time',
        yField: 'sett_amount',
        height: 400,
        padding: [30, 50, 30, 50],
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          time: {
            alias: '时间',
          },
          sett_amount: {
            alias: '销售额',
          },
        },
        minColumnWidth: 50,
        maxColumnWidth: 70,
      });

      columnPlot.render();
    }
  },
  mounted() {
    this.seven_days()
  }
}
</script>

<style scoped="scoped">
.heading {
  font-size: 20px;
  font-weight: bold;
}

.house-view {
  background-color: #FFFFFF;
  height: 450px;
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 30px;
}
</style>
